<template>
    <div>
        <div v-if="currentPanel == 'list'">
            <el-tabs v-model="activeName" type="border-card">
                <el-tab-pane label="按事件" name="first">
                    <el-card class="box-card" style="padding: 0px;margin:0px;">
                        <!-- 搜索筛选 -->
                        <el-form :inline="true" :model="formInline" class="user-search" style="padding: 0px;margin:0px;">
                            <el-form-item label="" style="width: 180px;padding: 0px;margin:0px;">
                                <el-input size="small" v-model="formInline.groupEventName" placeholder="请输入事件名称" style="width: 170px;"></el-input>
                            </el-form-item>
                            <el-form-item label="" style="padding: 0px;margin:0px;">
                                <div class="block">
                                    <el-date-picker
                                        size="small"
                                        v-model="formInline.time"
                                        type="datetimerange"
                                        range-separator="至"
                                        start-placeholder="创建开始日期"
                                        end-placeholder="创建结束日期"
                                        align="right">
                                    </el-date-picker>
                                </div>
                            </el-form-item>
                            <el-form-item style="padding: 0px;margin:0px;">
                                <el-button size="small" type="primary" @click="seach()">查询</el-button>
                                <el-button size="small" @click="setNull()">重置</el-button>
                            </el-form-item>
                        </el-form>
                    </el-card>
                    <el-card class="box-card"style="padding-left: 10px;margin-top:10px;">
                        <!-- 按钮 -->
                        <el-form :inline="true" class="user-search">
                            <el-form-item>
                                <el-button size="small" icon="el-icon-plus" type="primary" @click="handleAdd()">新建群事件</el-button>
                            </el-form-item>
                        </el-form>

                        <!--列表-->
                        <el-table ref="multipleTable" size="small" :data="listData"  style="width: 100%;" @selection-change="handleSelectionChange">
                            <el-table-column align="center" type="selection" width="60">
                            </el-table-column>
                            <el-table-column  prop="groupEventName" label="事件名称" width="250">
                            </el-table-column>
                            <el-table-column  prop="clientGroupName" label="群聊名称" width="200">
                            </el-table-column>
                            <el-table-column  prop="triggerTime" label="触发时间" width="250">
                            </el-table-column>
                            <el-table-column  prop="createTime" label="创建时间" width="200">
                            </el-table-column>
                            <el-table-column align="center" label="操作" min-width="150">
                                <template slot-scope="scope">
                                    <el-link type="primary" @click="currentHandler(scope.$index, scope.row)">详情</el-link>
                                    <el-link type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-link>
                                    <el-link type="primary" @click="deleteData(scope.$index, scope.row)">删除</el-link>
                                </template>
                            </el-table-column>
                        </el-table>
                        <!-- 分页 -->
                        <el-pagination @size-change="queryDataHandle(pagePagination.currentPage,$event)"
                                       @current-change="queryDataHandle($event,pagePagination.pageSize)"
                                       :current-page="pagePagination.currentPage"
                                       :page-sizes="pagePagination.pageSizes" :page-size="pagePagination.pageSize"
                                       layout="total, sizes, prev, pager, next"
                                       :total="pagePagination.total">
                        </el-pagination>
                    </el-card>
                </el-tab-pane>
                <el-tab-pane label="按时间" name="second">
                    <el-calendar v-model="currentDate">
                        <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
                        <template
                            slot="dateCell"
                            slot-scope="{date, data}">
                            <!--自定义内容-->
                            <div>
                                <div class="calendar-day">{{ data.day.split('-').slice(2).join('-') }}</div>
                                <div v-for="(item, index) in calendarData" :key="index">
                                    <div v-if="(item.months).indexOf(data.day.split('-').slice(1)[0])!=-1">
                                        <div v-if="(item.days).indexOf(data.day.split('-').slice(2).join('-'))!=-1">
                                            <el-tooltip class="item" effect="dark" :content="item.things" placement="right">
                                                <div class="is-selected">{{item.things}}</div>
                                            </el-tooltip>
                                        </div>
                                        <div v-else></div>
                                    </div>
                                    <div v-else></div>
                                </div>
                            </div>
                        </template>
                    </el-calendar>
                </el-tab-pane>
            </el-tabs>

            <!-- 新建群事件 -->
            <el-dialog :title="title" :visible.sync="dialogFormVisible" width="30%">
                <el-form :model="saveForm">
                    <el-form-item label="事件名称:">
                        <el-input v-model="saveForm.groupEventName" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="事件时间:">
                        <el-time-picker
                            v-model="saveForm.triggerTime"
                            :picker-options="{
                              selectableRange: '8:00:00 - 21:30:00'
                            }"
                            placeholder="请选择时间">
                        </el-time-picker>
                    </el-form-item>
                    <el-form-item label="事件内容:">
                        <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="saveForm.groupEventMessage" style="width: 60%">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="选择群聊:">
                        <el-button @click="addClientGroup()"> + 添加群聊</el-button>
                        <el-tag v-if="clientGroup.clientGroupName"> {{ clientGroup.clientGroupName }}</el-tag>
                    </el-form-item>
                    <el-form-item label="事件提醒：">
                        <el-switch v-model="saveForm.eventAlert" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
                    </el-form-item>
                    <el-card v-if="saveForm.eventAlert == true">
                        在事件时间到达前
                        <el-input type="text" v-model="saveForm.alertTime" style="width: 30%"></el-input>
                        分钟前发送提醒至群主
                    </el-card>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button size="small" @click="close">取 消</el-button>
                    <el-button size="small" type="primary" @click="saveEvent">确 定</el-button>
                </div>
            </el-dialog>

            <!-- 群事件详情 -->
            <el-dialog :title="title" :visible.sync="detailVisible" width="30%" >
                <el-form :model="updateForm">
                    <el-form-item label="事件名称:">
                        <el-input v-model="updateForm.groupEventName" autocomplete="off" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="事件时间:">
                        <el-input v-model="updateForm.triggerTime" autocomplete="off" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="事件内容:">
                        <el-input type="textarea" :rows="2"  v-model="updateForm.groupEventMessage" disabled style="width: 60%"></el-input>
                    </el-form-item>
                    <el-form-item label="关联群聊:">
                        <el-tag> {{ updateForm.clientGroupName }}</el-tag>
                    </el-form-item>
                    <el-form-item label="事件提醒：" v-if="updateForm.eventAlert">
                        在事件时间到达前
                        <el-input type="text" v-model="updateForm.alertTime" disabled style="width: 30%"></el-input>
                        分钟前发送提醒至群主
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="detailVisible = false">取 消</el-button>
                </div>
            </el-dialog>

            <!-- 添加群聊 -->
            <el-dialog title='添加群聊' :visible.sync="addClientGroupVisible" width="40%" @click="close">
                <div style="padding: 0px 0px 0px 30px;">
                    <ListSelect @getData="getData" :listFields="listGroupFields" :dataSource="listGroup"/>
                    <div class="button-center"style="padding: 10px 10px;">
                        <el-button size="mini" @click="addClientGroupVisible = false">取消</el-button>
                    </div>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import Pagination from '@/components/Pagination'
    import ListSelect from "@/components/list_select/list_select"
    import ElementUI from 'element-ui'
    // 修改 el-dialog 默认点击遮照为不关闭
    ElementUI.Dialog.props.closeOnClickModal.default = false;
    const initData = {
        groupEventName : '',
        groupEventMessage: '',
        triggerTime : '',
        createTime : '',
        alertTime:'',
        clientGroup:{},

    }
    export default {
        data() {
            return {
                // 列表多选框
                multipleSelection: [],
                detailVisible: false,
                //设置添加群聊
                clientGroup:{},
                addClientGroupVisible: false,
                listGroupFields:{
                    clientGroupName: '群聊名称',
                    empName: '群主名称'
                },
                listGroup: {},
                //添加群聊结束
                // 编辑页面标题
                title: '',
                // 堆叠式布局
                currentPanel: 'list',

                // 按时间的日历
                currentDate: new Date(),
                calendarData:[],

                data:{
                id: '',
                groupName: '',
                lordName: '',
                groupTag: '',
                createTime: ''
                },

                // 标签页
                activeName: 'first',
                listData: [],
                dialogFormVisible: false,

                updateFormVisible: false,
                updateForm:{},
                form: {
                    status: true,
                },

                // 分页参数
                pageparm: {
                    currentPage: 1,
                    pageSize: 10,
                    total: 0
                },

                // 筛选
                formInline: {
                    page: 1,
                    limit: 10,
                    varLable: '',
                    varName: '',
                    token: localStorage.getItem('logintoken')
                },
                // 新建
                saveForm: {

                },
                // 分页参数
                pagePagination: {
                    currentPage: 1,
                    pageSizes: [10, 15, 20, 25],
                    pageSize: 10,
                    total: 0
                },
            }
        },

        // 注册组件
        components: {
            Pagination,
            ListSelect,
        },

        mounted(){
            this.queryDataHandle(1, 10)
            this.initList()
        },

        methods: {
            queryDataHandle(page = 1, row = 10) {
                let that = this
                let payload = {
                    pageNum: page,
                    pageSize: row
                }
                this.$request("/api/groupEvent/getAllEvent/1_0", payload, "POST").then((data) => {
                    that.listData = data.rows
                    that.pagePagination['total'] = data.total
                    that.pagePagination['pageSize'] = data.row
                })
            },
            initList(){
                let that = this
                let calendarDat= []
                this.$request("/api/groupEvent/getAllEvent/1_0", {}, "POST").then((data) => {
                    data.rows.map((item) => {
                        let time = that.$moment(item.triggerTime)
                        calendarDat.push({
                            months: [time.format("MM")],
                            days: [time.format("DD")],
                            things:item.groupEventMessage
                        })
                    })
                    this.calendarData=calendarDat
                })
            },
            seach(page = 1, row = 10){
                let that = this
                this.formInline.pageNum = page
                this.formInline.pageSize = row
                if(this.formInline.time != null){
                    this.formInline.startTime = this.formInline.time[0]
                    this.formInline.endTime = this.formInline.time[1]
                }
                if(this.formInline.groupEventName == undefined || this.formInline.groupEventName == ''){
                    that.formInline.groupEventName = null
                }else{
                    that.formInline.groupEventName = that.formInline.groupEventName
                }

                this.$request("/api/groupEvent/getGroupEvent/1_0", that.formInline, "POST").then((data) => {
                    that.listData = data.rows
                    that.pagePagination['total'] = data.total
                    that.pagePagination['pageSize'] = data.row
                })
            },
            // 详情页
            currentHandler(current, row) {
                this.title = "群事件详情";
                this.updateForm = {...row}
                let that = this
                if(row.eventAlert == 'true'){
                    that.updateForm.eventAlert = true
                }else{
                    that.updateForm.eventAlert = false
                }
                this.detailVisible = true;
            },

            handleAdd(){
                this.dialogFormVisible = true;
                this.title = "新建群事件";
                this.type = 'add'
            },

            // 编辑
            handleEdit(index, row) {
                let that = this
                this.title = "群事件编辑";
                this.type = 'edit'
                this.saveForm = {...row}
                this.clientGroup.clientGroupName = row.clientGroupName
                this.clientGroup.clientGroupId = row.clientGroupId
                if(row.eventAlert == 'true'){
                    that.saveForm.eventAlert = true
                }else{
                    that.saveForm.eventAlert = false
                }
                this.dialogFormVisible = true;
            },
            // 编辑关闭
            handleClosr() {
                this.dialogFormVisible = false;
            },

            // 列表多选框
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },

            // 批量删除
            deleteData(index, row) {
                let that = this
                this.$confirm('确定要删除吗?', '信息', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                .then(() => {
                    this.$request("/api/groupEvent/deleteEvent/1_0", row, "POST").then((data) => {
                        if(data.data == 1){
                            this.$message({
                                message: "操作成功 ！",
                                type: 'success'
                            });
                        }
                        that.queryDataHandle(1,10)
                    })
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
            },
            addClientGroup(){
                let that = this
                that.title = '添加群聊'
                that.$request("/api/custGroup/selectGroup/1_0", "", "POST").then((data) => {
                    that.listGroup = [...data.rows]
                    that.addClientGroupVisible = true
                })
            },
            close() {
                this.addClientGroupVisible = false;
                this.dialogFormVisible = false;
            },
            getData(data) {
                this.clientGroup = data
                this.addClientGroupVisible = false
            },
            saveEvent(){
                this.saveForm.clientGroupId = this.clientGroup.clientGroupId
                let that = this
                if(that.saveForm.eventAlert == true){
                    that.saveForm.eventAlert='true'
                }else{
                    that.saveForm.eventAlert='false'
                }
                if(that.type == 'add'){
                    if(that.saveForm.eventAlert == true){
                        that.saveForm.alertTime = that.saveForm.alertTime * 60 * 1000
                    }
                    that.$request("/api/groupEvent/addEvent/1_0", this.saveForm, "POST").then((data) => {
                        if(data.data == 1){
                            this.$message({
                                message: "操作成功 ！",
                                type: 'success'
                            });
                        }
                        that.saveForm = {...initData}
                        that.dialogFormVisible = false
                        that.queryDataHandle(1,10)
                    })
                }else{
                    if(that.saveForm.eventAlert == true){
                        that.saveForm.alertTime = this.saveForm.alertTime * 60 * 1000
                    }
                    that.$request("/api/groupEvent/updateEvent/1_0", this.saveForm, "POST").then((data) => {
                        if(data.data == 1){
                            this.$message({
                                message: "操作成功 ！",
                                type: 'success'
                            });
                        }
                        that.saveForm = {...initData}
                        that.dialogFormVisible = false
                        that.queryDataHandle(1,10)
                    })
                }
            },
            setNull(){
                this.formInline.time=[]
                this.formInline.groupEventName = '';
            }
        }
    }
</script>

<style scoped>
.el-input {width: 60%;}
ul li {list-style: none; padding: 10px; margin: 15px 0;}
img {width: 100px; height: 100px; border-radius: 3px;}
.title {font-size: 20px;}
ul li:nth-child(2) {background: rgb(230,247,255);}
.tu {align-content: center;}

.twoUl li:nth-child(3) {background: rgb(249,249,249)}
.twoUl li:nth-child(4) {background: rgb(249,249,249)}

.el-card{margin-top: 30px;}

.el-link {margin: 0 20px;}
</style>
